<!-- 图文列表组件 -->

<template>
	<div class="latestContents">
		<h3>{{tittle}}</h3>
		<div class="content" v-for="item in items" :key="item.id">
			<div class="nav-l">
				<p class="unfold title">{{item.text|filterFun}}</p>
				<p class="type"><span v-text="item.type"></span><span v-text="item.num"></span></p>

			</div>
			<div class="nav-r">
				<img :src="item.imgSrc" alt="">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
			},
			tittle: {
				type: String,
			},
		},

		data() {
			return {

			};
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if (value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	h3 {
		position: relative;
		text-indent: 8px;

		&:after {
			position: absolute;
			content: '';
			width: 4px;
			height: 15px;
			border-radius: 2px;
			background: @base-blue-color;
			left: 0;
			right: 0;
			top: 1px;
			margin-left: 0;
			margin-right: auto;
		}
	}

	//图文列表组件样式
	.latestContents {
		border-bottom: 7px solid @border-color;
		padding: 0px 15px 20px 15px;
		margin-bottom: 50px;
		width: calc(100% - 30px);

		h3 {
			font-size: 17px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 20px 0px;
			margin-top: 20px;
			position: relative;
		}

		.content {
			font-size: 14px;
			padding: 0 0px;
			display: flex;
			margin-bottom: 20px;
			justify-content: space-between;

			.nav-l {
				text-align: left;

				.unfold {
					height: 50px;
				}

				p {

					&:first-child {
						line-height: 25px;
					}

					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						display: flex;
						justify-content: space-between;
						color: #CCCCCC;

						span {
							text-align: right;
							padding-right: 25px;
							display: inline-block;

							&:last-child {
								position: relative;

								&:after {
									position: absolute;
									content: '';
									width: 14px;
									height: 10px;
									background: url('../assets/imgs/home_browse@2x.png');
									background-size: 100% 100%;
									vertical-align: middle;
									left: 0;
									right: -25px;
									display: inline-block;
									top: 0;
									bottom: 0;
									margin: auto;


								}
							}

						}
					}
				}
			}

			.nav-r {
				width: 111px;
				height: 73px;
				margin-left: 25px;
				height: 75px;
				border-radius: 5px;

				img {
					width: 111px;
					height: 73px;
					border-radius: 5px;
				}
			}
		}
	}
</style>
